<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>
	<style>
		*{
	font-family:PingFang-SC-Bold;
}

.mui-bar-nav{
	background: #FFFFFF;
}

.xqsou{
	width: 90%;
	position: relative;
	float: left;
	height: 100%;
	padding-top: 3px;
}
.xqsou >input{
	width: calc(100% -  35px);
	height: 38px;
	position: relative;
	float: left;
	font-size:14px;
font-weight:bold;
color:rgba(152,152,152,1);
background:rgba(245,245,245,1);
border-radius:19px;
border: none;
padding-left: 44px;
box-sizing: border-box;
}

.xqsou >div{
	position: relative;
	float: right;
	width: 28px;
	height: 38px;
	line-height: 38px;
	font-size:14px;
font-weight:bold;
color:rgba(51,51,51,1);
}

.sous{
	position: absolute;
	width: 18px;
	height: 18x;
	left: 11px;
	top: 14px;
}
a{
	color:rgba(51,51,51,1)!important
}

.mui-content{
	width: 100%;
	height: 100%;
	background: #FFFFFF;
	padding: 15px  15px;
	box-sizing: border-box;
	display: inline-block;
}

#insub >div:nth-child(1){
	position: relative;
	float: left;
	width: 100%;
	height:55px;
    margin-top:10px;
}

#insub >div:nth-child(1)>div:nth-child(1){
	width: 80px;
	height: 55px;
	position: relative;
	float: left;
    line-height: 55px;	
	font-size:16px;
   font-weight:bold;
   color:rgba(51,51,51,1);
}
#insub >div:nth-child(1)>input{
	position: relative;
	float: left;
	width: calc(100% - 80px);
	height: 55px;
	border: none;
	font-size:16px;
    font-weight:bold;
    color:rgba(102,102,102,1);
	padding:0px 0px;
}
.biaoqians{
	position: relative;
	float: left;
	width: 100%;
}

.biaoqians>div:nth-child(1){
	position: relative;
	float: left;
	width: 100%;
	height: 55px;
	line-height: 55px;
	text-align: left;
	font-size:15px;
color:rgba(153,153,153,1);
}

.biaoqian{
	position: relative;
	float: left;
	width: 100%;
}
.biaoqian>div{
	position: relative;
	float: left;
	width: 80px;
	max-width: 80px;
	overflow: hidden;
	text-align: center;
	height: 32px;
	margin-left: calc((100% - 320px ) /  4);
	margin-top: 10px;
	background:rgba(248,248,248,1);
border-radius:4px;
font-size:14px;
line-height: 32px;
color:rgba(51,51,51,1);
}

.activity{
	background: red!important;
	color: #FFFFFF!important;
	
}
.surecreate{
	position: relative;
	float: left;
	width: 100%;
	height:43px;
	margin-top: 60px;
	line-height: 43px;
background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
box-shadow:0px 5px 8px 0px rgba(254, 95, 99, 0.35);
border-radius:20px;
text-align: center;
font-size:16px;
font-weight:bold;
color:rgba(255,255,255,1);
	
}


</style>
	<body>
	  <header class="mui-bar mui-bar-nav">
	  	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	  	<h1 class="mui-title">新建群聊</h1>
	  </header>


<div class="mui-content" id="insub">
	<div><div>群聊昵称:</div><input name="name" type="text" placeholder="学习交流群" /></div>
	<div class="biaoqians">
	<div>可选两个群聊标签</div>
	<div class="biaoqian">
	</div>
	</div>
	
	<div class="surecreate">确认新建</div>
</div>
	
	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript">
		mui.plusReady(function(){
			var url = plus.storage.getItem('url');
			var user = plus.storage.getItem('user');
			var  feiyong = 0;
			user = JSON.parse(user);
			mui.post(url+"/juyou/Grouping/getlable",{},function(res){
				if(res.code==200){
					var str = '';
					//加载标签
					mui.each(res.data.data,function(i,v){
						str +='<div state=0>'+v.name+'</div>';
					})
					feiyong = res.data.soufei;
					$(".biaoqian").append(str);
				}else{
					mui.toast(res.msg);
				}
			})
			//新建群聊
			mui('#insub').on('tap','.surecreate',function(){
                   var btnArray = ['确认', '取消']; 
				// Phone = "025-88888888"; 
				mui.confirm('为了避免恶意建群难于管理， 每次建群自动扣取' + feiyong + ' 金币 建群成功以后金币概不退还，望谨慎操作', '提示', btnArray, function(e) { 
				    if (e.index == 0) { 
				       				var name = $("[name=name]").val();
				       if(!name){
				       	mui.toast('请填写群聊名称');
				       	return
				       }
				       var biaoqian = [];
				       var obj = $(".biaoqian").children();
				       mui.each(obj,function(i,v){
				       	if($(v).attr('state')=='1'){
				       		biaoqian.push($(v).text())
				       	}
				       });
				       if(biaoqian.length<1){
				       	mui.toast('请选择标签');
				       	return;
				       }
				       plus.nativeUI.showWaiting();
				       mui.post(url+'/juyou/Grouping/addqun',{token:user.token,name:name,label:biaoqian},function(res){
				       	plus.nativeUI.closeWaiting();
				       	mui.toast(res.msg);
				       	if(res.code==200){
				       		var sub5 = plus.webview.getWebviewById('sub5.html');
				       		sub5.reload();
                             setTimeout(function(){
				       			mui.back();
				       		},1500)
				       	}else if(res.code==206){
				       		setTimeout(function(){
				       			mui.openWindow({
				       				url:"../sub5/huchongzhigold.html",
				       				id:"../sub5/huchongzhigold.html",
				       			})
				       		},1500)
				       	}
				       })
					   
				    }  
				})
				

			})
			
			
			mui.init({
				beforeback: function() {　　　　
				var list = plus.webview.currentWebview().opener();　　　　
					  //refresh是A页面自定义事件
				mui.fire(list, 'refresh');
					 //返回true,继续页面关闭逻辑
				return true;
				},
			});
			var height = document.body.clientHeight;
			$(".mui-content").css("height", height)
			mui(".biaoqian").on("tap","div",function(){
				   var state=$(this).attr("state");
				   if(state==0){
					   $(this).addClass("activity")
					   $(this).attr("state","1")
				   }else{
					      $(this).removeClass("activity")
					   $(this).attr("state","0")
					   
				   }
				   
			})
		})
		
   
   
   




	</script>
</html>
